
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Calendar, Users, Lightbulb, HelpCircle, BookOpen } from "lucide-react";

interface UpcomingEventsProps {
  role: 'student' | 'teacher';
}

export const UpcomingEvents = ({ role }: UpcomingEventsProps) => {
  if (role === 'teacher') {
    return (
      <Card className="bg-white dark:bg-gray-800 shadow-sm border">
        <CardHeader>
          <CardTitle className="text-lg font-semibold">Upcoming Events</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center space-x-3">
            <Calendar className="w-5 h-5 text-blue-500" />
            <div>
              <p className="font-medium text-gray-800 dark:text-gray-200">Professional Development Webinar</p>
              <p className="text-sm text-gray-500 dark:text-gray-400">Today, 4:00 PM</p>
            </div>
          </div>
          <div className="flex items-center space-x-3">
            <Users className="w-5 h-5 text-green-500" />
            <div>
              <p className="font-medium text-gray-800 dark:text-gray-200">Teacher Collaboration Hour</p>
              <p className="text-sm text-gray-500 dark:text-gray-400">Tomorrow, 3:00 PM</p>
            </div>
          </div>
          <div className="flex items-center space-x-3">
            <Lightbulb className="w-5 h-5 text-purple-500" />
            <div>
              <p className="font-medium text-gray-800 dark:text-gray-200">EdTech Innovation Session</p>
              <p className="text-sm text-gray-500 dark:text-gray-400">May 25, 2024</p>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <CardTitle className="text-lg font-semibold">Upcoming Events</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center space-x-3">
          <Calendar className="w-5 h-5 text-blue-500" />
          <div>
            <p className="font-medium text-gray-800 dark:text-gray-200">Math Study Session</p>
            <p className="text-sm text-gray-500 dark:text-gray-400">Today, 7:00 PM</p>
          </div>
        </div>
        <div className="flex items-center space-x-3">
          <HelpCircle className="w-5 h-5 text-green-500" />
          <div>
            <p className="font-medium text-gray-800 dark:text-gray-200">Teacher Q&A Hour</p>
            <p className="text-sm text-gray-500 dark:text-gray-400">Tomorrow, 3:00 PM</p>
          </div>
        </div>
        <div className="flex items-center space-x-3">
          <BookOpen className="w-5 h-5 text-purple-500" />
          <div>
            <p className="font-medium text-gray-800 dark:text-gray-200">Science Fair Prep</p>
            <p className="text-sm text-gray-500 dark:text-gray-400">May 20, 2024</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};
